.s_icon {
  width: 60px;
  height: 60px;
  background-size: 100% auto;
  display: block;
  cursor: pointer;
}
.s_icon:hover {
  animation: s_icon 0.6s steps(24) forwards;
}

.s_icon:not(:hover) {
  animation: s_icon_reverse 0.6s steps(24) forwards;
}

@keyframes s_icon {
  from {
    background-position-y: 0;
  }

  to {
    background-position-y: -1440px;
  }
}

@keyframes s_icon_reverse {
  from {
    background-position-y: -1440px;
  }
  to {
    background-position-y: 0;
  }
}

.s_barrel {
  background-image: url('@/assets/images/spirit_icons/Barrel.png');
}
.s_cloud {
  background-image: url('@/assets/images/spirit_icons/Cloud.png');
}
.s_code {
  background-image: url('@/assets/images/spirit_icons/Code.png');
}
.s_core {
  background-image: url('@/assets/images/spirit_icons/Core.png');
}
.s_cube {
  background-image: url('@/assets/images/spirit_icons/Cube.png');
}
.s_cycle {
  background-image: url('@/assets/images/spirit_icons/Cycle.png');
}
.s_files {
  background-image: url('@/assets/images/spirit_icons/Files.png');
}
.s_globe {
  background-image: url('@/assets/images/spirit_icons/Globe.png');
}
.s_count {
  background-image: url('@/assets/images/spirit_icons/Count.png');
}
.s_safe {
  background-image: url('@/assets/images/spirit_icons/Safe.png');
}
.s_store {
  background-image: url('@/assets/images/spirit_icons/Store.png');
}
.s_box {
  background-image: url('@/assets/images/spirit_icons/Box.png');
}
.s_video {
  background-image: url('@/assets/images/spirit_icons/Video.png');
}
.s_wifi {
  background-image: url('@/assets/images/spirit_icons/Wifi.png');
}
